"use client"

import * as React from "react"

import { useMediaQuery } from "@/utils/use-media-query"
// 1. 创建上下文（仅存必要状态）
const MyTabsContext = React.createContext<{
  isDesktop: boolean
  setOpen: (open: boolean) => void
}>({ isDesktop: false, setOpen: () => {} })

import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTrigger,
  DrawerTitle,
  DrawerFooter,
} from "@/components/ui/drawer"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { ReactNode, useContext, useState } from "react"
import Icon from "@/components/common/icon"
import { X } from "lucide-react"
import classNames from "classnames"


interface MyFormModalFooterProps {
  children: ReactNode
  className?: string
}
export const MyFormModalFooter = ({children, className}: MyFormModalFooterProps)=>{
  const { isDesktop } = useContext(MyTabsContext)
  if(isDesktop){
    return <div className={classNames('px-list-p-x-md py-2', className)}>{children}</div>
  }
  return <DrawerFooter className={classNames('px-page-p-x', className)}>{children}</DrawerFooter>
}

interface MyFormModalTriggerProps {
  children: ReactNode
  asChild?: boolean
}
export const MyFormModalTrigger = ({children, asChild=true}: MyFormModalTriggerProps)=>{
  const { isDesktop } = useContext(MyTabsContext)
  if(isDesktop){
    return <PopoverTrigger asChild={asChild}>
      {children}
    </PopoverTrigger>
  }
  return <DrawerTrigger asChild={asChild}>{children}</DrawerTrigger>
}

interface MyFormModalHeaderProps {
  children: ReactNode
}
export const MyFormModalHeader = ({children}: MyFormModalHeaderProps)=>{
  const { isDesktop, setOpen } = useContext(MyTabsContext)
  if(isDesktop){
    return null
  }
  return <DrawerHeader className="relative h3 px-page-p-x">
    <DrawerTitle className="text-center">
      {children}
    </DrawerTitle>
    <button className="absolute top-1/2 transform -translate-y-1/2 right-page-p-x" onClick={()=>{
      setOpen(false)
    }}>
      <Icon icon={X} />
    </button>
  </DrawerHeader>
}

interface MyFormModalBodyProps {
  children: ReactNode
}
export const MyFormModalBody = ({children}: MyFormModalBodyProps)=>{
  return <div className="overflow-auto flex-1">{children}</div>
}

interface MyFormModalContentProps {
  children: ReactNode
  className?: string
}
export const MyFormModalContent = ({children, className}: MyFormModalContentProps)=>{
  const { isDesktop } = useContext(MyTabsContext)
  if(isDesktop){
    return <PopoverContent align="start" side="bottom" className={classNames('w-[--radix-popover-trigger-width] min-w-[240px] max-h-[360px] p-0 flex flex-col', className)}>
      {children}
    </PopoverContent>
  }
  return <DrawerContent className={classNames("w-content !px-0", className)}>{children}</DrawerContent>
}

interface Props {
  children: ReactNode
  name?: string
  open: boolean
  setOpen: (open: boolean) => void;
}
export function MyFormModal({children, open, setOpen}: Props) {
  // const [open, setOpen] = useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")
  if (isDesktop) {
    return (
      <MyTabsContext.Provider value={{ isDesktop, setOpen }}>
        <Popover open={open} onOpenChange={setOpen}>{children}</Popover>
      </MyTabsContext.Provider>
    )
  }

  return (
    <MyTabsContext.Provider value={{ isDesktop, setOpen }}>
      <Drawer open={open} onOpenChange={setOpen}>
        {children}
      </Drawer>
    </MyTabsContext.Provider>
  )
}

{/* <MyFormModal>
  <MyFormModalTrigger>
    <Button>filter</Button>
  </MyFormModalTrigger>
  <MyFormModalContent>
    <MyFormModalHeader>
      Filter
    </MyFormModalHeader>
    <MyFormModalBody>
      66666
    </MyFormModalBody>
    <MyFormModalFooter>
      <Button>确定</Button>
    </MyFormModalFooter>
  </MyFormModalContent>
</MyFormModal> */}